<template>
  <Table v-if="cloneConfig"
    ref="table"
    :size="cloneConfig.size"
    :columns="finalColumn"
    :data="data"
    :stripe="cloneConfig.stripe"
    :loading="cloneConfig.loading"
    :max-height="cloneConfig.tableHeight"
    :highlight-row="true"
    :style="cloneConfig.style"
    class="table-wrapper"
    @on-row-click="(row,index)=>$emit('handleClick',row,index)"
    @on-row-dblclick="(row,index)=>$emit('handleDbClick',row,index)"
    @on-sort-change="(column,key,order)=>$emit('handleSortChange',column,key,order)"
    @on-select="(selection,row)=>$emit('handleSelect',selection,row)"
    @on-select-cancel="(selection,row)=>$emit('handleSelectCancel',selection,row)"
    @on-select-all="(selection)=>$emit('handleSelectAll',selection)"
    @on-select-all-cancel="(selection)=>$emit('handleClearSelect',selection)">
  >
    <template v-if="cloneConfig.additionalAction" slot-scope="{ row,column,index }" slot="additionalAction">
      <div @click.stop.prevent v-if="!G_IsMobile"><!-- 非pda -->
        <template v-for="(item,i) in additionalAction.buttons">
          <a :style="item.style" type="text" @click="item.event(row,column,index,item)" 
            v-if="cloneConfig.additionalActionFn(row,column,index,item)"
            v-bind="item" :disabled="item.disabled">
            {{ item.title }}
          </a>
          <Divider v-if="i<additionalAction.buttons.length-1 && cloneConfig.additionalActionFn(row,column,index,item)" type="vertical"/>
        </template>
      </div>
      <Dropdown trigger="click" v-if="G_IsMobile" transfer><!-- 兼容pda -->
        <a type="text">
            {{lang.more}}
            <Icon type="ios-arrow-down"></Icon>
        </a>
        <template #list>
            <template v-for="(item,i) in additionalAction.buttons">
            <DropdownMenu v-if="cloneConfig.additionalActionFn(row,column,index,item)">
                <Button :style="item.style" type="text" @click="item.event(row,column,index,item)">{{ item.title }}</Button>
            </DropdownMenu>
            </template>
        </template>
      </Dropdown>
    </template>
    <template v-if="cloneConfig.action" slot-scope="{ row,column,index }" slot="action">
      <div @click.stop.prevent v-if="!G_IsMobile"><!-- 非pda -->
        <a type="text" v-if="cloneConfig.actionFn(row,column,index,{title:'edit'})" @click="$emit('handleEdit',row,column,index,{title:'edit'})">{{ lang.edit }}</a>
        <Divider type="vertical" v-if="cloneConfig.actionFn(row,column,index,{title:'edit'})"/>
        <a type="text" v-if="cloneConfig.actionFn(row,column,index,{title:'delete'})" @click="$emit('handleDelete',row,column,index,{title:'delete'})">{{ lang.delete }}</a>
        <Divider type="vertical" v-if="cloneConfig.actionFn(row,column,index,{title:'delete'})"/>
        <a type="text" v-if="cloneConfig.actionFn(row,column,index,{title:'detail'})" @click="$emit('handleDetail',row,column,index,{title:'detail'})">{{ lang.detail }}</a>
      </div>
      <Dropdown trigger="click" v-if="G_IsMobile" transfer><!-- 兼容pda -->
        <a type="text">
            {{lang.more}}
            <Icon type="ios-arrow-down"></Icon>
        </a>
        <template #list>
            <DropdownMenu>
                <DropdownItem v-if="cloneConfig.actionFn(row,column,index,{title:'edit'})">
                    <a type="text" @click="$emit('handleEdit',row,column,index,{title:'edit'})">{{ lang.edit }}</a>
                </DropdownItem>
                <DropdownItem v-if="cloneConfig.actionFn(row,column,index,{title:'delete'})">
                    <a type="text" @click="$emit('handleDelete',row,column,index,{title:'delete'})">{{ lang.delete }}</a>
                </DropdownItem>
                <DropdownItem v-if="cloneConfig.actionFn(row,column,index,{title:'detail'})">
                    <a type="text" @click="$emit('handleDetail',row,column,index,{title:'detail'})">{{ lang.detail }}</a>
                </DropdownItem>
            </DropdownMenu>
        </template>
      </Dropdown>
    </template>
  </Table>
</template>

<script>
import { merge, cloneDeep } from "lodash";
export default {
  name:'AtomBasicTable',
  components: {},
  data() {
    return {
        cloneConfig: null,
        finalColumn:[],
    };
  },
  props: {
    config:{
        default:()=>{
            return {}
        }
    },
    columns:{
        default:()=>{
            return []
        }
    },
    additionalAction:{
      default:()=>{
        return {}
      }
    },
    data:{
        default:()=>{
            return []
        }
    }
  },
  computed: {
    lang(){
      return {
        "en-US": {
          edit:'edit',
          delete:'delete',
          detail:'detail',
          action:'action',
          more: 'more',
        },
        "zh-CN": {
          edit:'编辑',
          delete:'删除',
          detail:'查看',
          action:'操作',
          more: '更多',
        },
      }[this.G_Locale]
    },
    defaultConfig() {
      return {
        stripe: true, //条纹
        size: "default", //尺寸
        loading: false, //是否加载
        rowClassName: '', //行样式
        tableHeight: 'auto', //表高
        style: {},
        checkColumn:true,
        numberColumn:true,
        action:true,
        additionalAction:false
      };
    },
    checkColumn(){
      return {
        type: 'selection',
        width: 60,
        align: 'center',
        field:'left',
        show: true,
      }
    },
    numberColumn(){
      return {
        type: 'index',
        width: 60,
        align: 'center',
        field:'left',
        show: true,
      }
    },
    actionColumn(){
      return {
          key: 'action',
          title: this.lang.action,
          slot: 'action',
          width: this.G_IsMobile?90:200,
          fixed: 'right',
          align: 'center',
          show: true
      }
    },
  },
  watch: {
    config: {
      handler(val) {
        this.cloneConfig = merge(this.cloneConfig, this.config);
      },
      deep: true,
    },
    columns: {
      handler(val) {
        this.getFinalColumn();
      },
      deep: true,
    },
  },
  mounted() {
    this.setConfig();
    this.getFinalColumn();
    this.$nextTick(() => {
      this.$emit("onload", this);
    });
  },
  created() {},
  methods: {
    setConfig() {
      this.cloneConfig = merge(this.defaultConfig, this.config);
      Object.keys(this.cloneConfig).map((key) => {
        this.$set(this.config, key, this.cloneConfig[key]);
      });
    },
    getFinalColumn(){
      let columns = [];
      this.columns.map(item=>{
        if(item.show){
            let col = cloneDeep(item);
            if(!col.render&&col.config){
                col['render']=(h,{row,column,index})=>{
                    return h('AtomEditor',{
                        props:{
                            config:col.config,
                            value:this.tools.lodash.get(row,column.key)
                        },
                        on:{
                            change:(val)=>{
                                this.tools.lodash.set(this.data[index],column.key,val)
                            }
                        }
                    })
                }
            }
            return columns.push(col);
        }
      });
      if(this.cloneConfig.numberColumn){
        columns.unshift(this.numberColumn)
      }
      if(this.cloneConfig.checkColumn){
        columns.unshift(this.checkColumn)
      }
      if(this.cloneConfig.additionalAction){
        columns.push(this.additionalAction)
      }
      if(this.cloneConfig.action){
        columns.push(this.actionColumn)
      };
      this.finalColumn = columns;
    },
    setTableData(callback){
        callback(this.$children[0].objData)
    }
  }
};
</script>
<style scoped lang="scss">
.table-wrapper {
  // height: 100%;
  overflow: hidden !important;
}
</style>